<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股权穿透图</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/main.css">
  <style>
    .left-side {
      width: 300px;
      float: left;
      height: 474px;
      padding:10px;
      background-color: #fff;
    }

    .main {
      margin-left: 320px;
      background-color: #fff;
      overflow: auto;
    }

    .query-header {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .radio-beauty {
      position: relative;
    }

    .radio-beauty input {
      width: 80px;
      height: 32px;
      position: absolute;
      opacity: 0;
    }

    .radio-beauty .radio-btn {
      border: none;
      outline: none;
      width: 80px;
      height: 32px;
      background: #f3f3f3;
      color: #333;
    }

    .radio-beauty input:checked+.radio-btn {
      background-color: #2B9DF8;
      color: #fff;
    }

    .query-body {
      margin-bottom: 20px;
    }

    .query-body .form-control {
      display: inline-block;
      width: 50px;
      border: none;
      outline: none;
      border-bottom: 1px solid #333;
      border-radius: 0;
    }

    .btn-wrap {
      text-align: center;
    }

    .search-btn {
      width: 90%;
      height: 32px;
      outline: none;
      border: none;
      background-color: #FFB335;
      color: #fff;
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <div class='content'>
    <div class="left-side">
      <div class="query-header">穿透维度</div>
      <div class="query-body wd-items">
        <label for="" class="radio-beauty">
          <input type="radio" name="wd" value="1" checked>
          <button class="radio-btn">全部</button>
        </label>
        <label for="" class="radio-beauty">
          <input type="radio" name="wd" value="2">
          <button class="radio-btn">股东</button>
        </label>
        <label for="" class="radio-beauty">
          <input type="radio" name="wd" value="3">
          <button class="radio-btn">投资</button>
        </label>
      </div>

      <div class="query-header">状态</div>
      <div class="query-body status-items">
        <label for="" class="radio-beauty">
          <input type="radio" name="status" value="1" checked>
          <button class="radio-btn">全部</button>
        </label>
        <label for="" class="radio-beauty">
          <input type="radio" name="status" value="2">
          <button class="radio-btn">注销</button>
        </label>
        <label for="" class="radio-beauty">
          <input type="radio" name="status" value="3">
          <button class="radio-btn">迁出</button>
        </label>
        <label for="" class="radio-beauty">
          <input type="radio" name="status" value="4">
          <button class="radio-btn">吊销未注</button>
        </label>
        <label for="" class="radio-beauty">
          <input type="radio" name="status" value="5">
          <button class="radio-btn">吊销已注</button>
        </label>
        <label for="" class="radio-beauty">
          <input type="radio" name="status" value="5">
          <button class="radio-btn">停业</button>
        </label>

        <div class="form-group">
          去除持股
          <input type="text" class="form-control">
          %以下的节点
        </div>

        <div class="btn-wrap">
          <button type="text" class="search-btn">查询</button>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="box-noshadow">
        <div class="box-header">
          <div class="header-title">股权穿透图</div>
        </div>
        <div class="box-body">
          <div class="chart" id="graphChart" style="width:1400px;height:400px;"></div>
        </div>
      </div>
    </div>
  </div>
  <script src="./plugins/jquery/jquery.min.js"></script>
  <script src="js/echarts.js"></script>
  <script>
    $(function () {
      
      var listdata = []
      var linksdata = []

      var data = [{
        name: '云能天化股份有限公司',
        category: 0,
        children: [{
          name: 'xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1',
          value: 5.9,
          category: 1
        }, {
          name: 'xxxx公司2',
          value: 3,
          category: 1
        }, {
          name: 'xxxx公司3',
          value: 3,
          category: 1
        }, {
          name: 'xxxx公司4',
          value: 20,
          category: 1
        }, {
          name: 'xxxx公司5',
          value: 19.5,
          category: 1
        }, {
          name: 'xxxx公司6',
          value: 30.5,
          category: 1
        }, {
          name: 'xxxx公司7',
          value: 30.5,
          category: 1
        }, {
          name: 'xxxx公司8',
          value: 30.5,
          category: 1
        }, {
          name: 'xxxx公司9',
          value: 30.5,
          category: 1
        }]
      }]

      $('.search-btn').on('click', function () {

        var currWd = $(".wd-items input[type='radio']:checked").val();
        var currStatus = $(".status-items input[type='radio']:checked").val();
        console.log(currWd, currStatus)
        setTimeout(function () {
          // 模拟接口请求
          var data = [{
            name: '云能天化股份有限公司11111111122222',
            category: 0,
            children: [{
              name: 'xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1xxxx公司1',
              value: 5.9,
              category: 1
            }, {
              name: 'xxxx公司2',
              value: 3,
              category: 1
            }, {
              name: 'xxxx公司3',
              value: 3,
              category: 1
            }, {
              name: 'xxxx公司4',
              value: 20,
              category: 1
            }, {
              name: 'xxxx公司5',
              value: 19.5,
              category: 1
            }, {
              name: 'xxxx公司6',
              value: 30.5,
              category: 1
            }, {
              name: 'xxxx公司7',
              value: 30.5,
              category: 1
            }, {
              name: 'xxxx公司8',
              value: 30.5,
              category: 1
            }, {
              name: 'xxxx公司9',
              value: 30.5,
              category: 1
            }]
          }]

          listdata = []
          linksdata = []
          setNodeData(data)
          setLinkData(data)
          setOption()
        }, 400)
      })
      // 股权穿透图
      var myChart = echarts.init(document.getElementById('graphChart'))
      var colorList = ["#2B9DF8", '#FBB969', '#F36154', '#3EC3CE', '#B1C5D4', '#705AFC', '#4363DA', '#00E574',
        '#848423', 'orange'
      ]

      // 容器宽度
      var vW = $('#graphChart').width()

      function setNodeData(data) {
        var dataLen = data.length
        var itemW = vW / dataLen
        console.log(itemW)
        $.each(data, function (index, item) {
          var obj = {
            "draggable": "true"
          }
          obj.name = item.name
          obj.category = item.category
          if (item.category == 0) {
            obj.x = vW / 2 - 60
            obj.y = 0
          } else {
            obj.x = itemW * index
            obj.y = 200
          }
          listdata.push(obj)
          if (item.children && item.children.length) {
            setNodeData(item.children)
          }
        })
      }

      function setLinkData(data, name) {
        $.each(data, function (index, item) {
          if (item.category !== 0) {
            var obj = {}
            obj.source = item.name
            obj.target = name
            obj.value = item.value
            linksdata.push(obj)
            if (item.children && item.children.length > 0) {
              setLinkData(item.children, item.name)
            }
          } else {
            if (item.children && item.children.length > 0) {
              setLinkData(item.children, item.name)
            }
          }
        })
      }
      setNodeData(data)
      setLinkData(data)
      setOption()

      function setOption() {
        var option = {
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          textStyle: {
            color: '#000'
          },
          series: [{
            type: 'graph',
            tooltip: {
              //formatter: "{b} <br/>{a} : {c} h "
            },
            layout: 'none',
            label: {
              normal: {
                show: true,
                position: 'inside',
                textStyle: {
                  fontSize: 12,
                  color: '#fff',
                  lineHeight: 14,
                  fontWeight: 'bold',
                },
                formatter: function (val) {

                  var name = val.name
                  var strs = name.split(''); //字符串数组
                  var str = ''
                  if (val.data.category !== 0) {
                    for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                      str += s;
                      if (!(i % 15)) str += '\n'; //按需要求余
                    }
                  } else {
                    for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                      str += s;
                      if (!(i % 8)) str += '\n'; //按需要求余
                    }
                  }

                  return str
                },
              }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [0, 10],
            edgeLabel: {
              normal: {
                show: true,
                position: 'middle',
                textStyle: {
                  fontSize: 18
                },
                formatter: "{c}%"
              }
            },
            //注意，所有节点的位置都是根据自己设置的x, y坐标来设置的
            data: listdata,
            //这是点与点之间的连接关系
            links: linksdata,
            autoCurveness: true,
            //线条的颜色
            lineStyle: {
              normal: {
                opacity: 0.9,
                color: '#53B5EA',
                type: 'dashed',
                width: 1,
              }
            },
            categories: [{
              name: '父节点',
              symbol: 'react',
              symbolSize: [120, 80],
              symbolOffset: [0, '-10%'],
              itemStyle: {
                color: colorList[0]
              }
            }, {
              name: '层级二',
              symbol: 'react',
              symbolSize: [120, 80],
              symbolOffset: [0, '20%'],
              itemStyle: {
                color: colorList[1]
              }
            }],
          }]
        }
        myChart.setOption(option)
      }
      

      
      myChart.on('click', function(params) {
        if(params.data.category == 1) {
          // 模拟接口请求
          setTimeout(function() {
            // 如果存在下级
            var data = []
            if(data && data.length>0) {
              listdata = []
              linksdata = []
              setNodeData(data)
              setLinkData(data)
              setOption()
            }
          }, 300)

        }
      })
      
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)
    })
  </script>
</body>

</html>